import React from 'react'; 
import { Column } from '@ant-design/plots';

export default function ColumnChart (props) {
  const data = props.todaySalesChart;

  const config = {
    data,
    padding: [30, 80, 20, 80],
    xField: 'categoryName',
    yField: 'saleNum',
    color: '#2380FC', 
    maxColumnWidth:32, 
    columnStyle: {
       fill: 'l(270) 0:#072260 0.5:#144EAA  1:#2380FC',
    },
    label: {
      // 可手动配置 label 数据标签位置 stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
      position: 'top',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    }, 
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      categoryName: {
        alias: '类别',
      },
      saleNum: {
        alias: '笔',
        min: 0,
        max: 20,
      },
    },
  };
  return <Column {...config} />;
};
 
